<template>
	<view>
		<view class="bgColor_order" v-if="cardListArray.length !== 0 && nodataFlag">
			<view class="cardList" v-for="(item, index) in cardListArray" :key="index">
				<view class="list_name_hader">
					<view class="title">订单编号：{{item.ordernumber}}</view>
					<view class="details">
						<view @click="detailsClick(item)">查看详情</view>
						<view>
							<u--image :showLoading="true" src="/static/imgs/jtimg.png" width="12rpx" height="20rpx"
								style="margin-left: 8rpx;">
							</u--image>
						</view>
					</view>
				</view>
				<view class="list_concent">
					<view class="list_concent_item">预约证件号：{{item.identificationnumber}}</view>
					<view :class="item.isappointmentsuccessful == '1' ? 'jfcgColor' : 'list_concent_item'">
						预约状态：{{item.isappointmentsuccessful | isappointmentsuccessful}}</view>
					<view class="ispay">
						支付状态：<view :class="item.ispay == '1' ? 'list_concent_item' : 'ddjfColor'">
							{{item.ispay | ispay}}
						</view>
					</view>
					<view class="list_concent_item">
						<view class="">下单时间：{{item.createtime | createtime}}</view>
						<view class="delbutton" v-if="item.ispay == '0'" @click="delOrderClick(item)">删除</view>
						<view class="xgbutton" @click="addOrderClick('update', item)"
							v-if="item.ispay !== '1' && item.isappointmentsuccessful !== '1'">修改</view>
					</view>
				</view>
			</view>
			<view v-show="isLoadMore">
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>
			<view v-show="loadStatus == 'nomore'" style="text-align: center;font-size: 20rpx;margin-top: 20rpx">
				我也是有底线的~
			</view>
			<view class="addButton_order" @click="addOrderClick('add', '')">
				添加新订单
			</view>
			<view class="goOutLogin" @click="goOutLogin()">
				退出登录
			</view>
		</view>
		<view v-if="cardListArray.length == 0 && nodataFlag">
			<view class="bg-nodata">
				<view style="" class="image">
					<u--image :showLoading="true" src="/static/imgs/zanwudingdan.png" width="382rpx" height="366rpx"
						style=""></u--image>
				</view>
				<view class="no_text">暂无订单，赶紧去下单吧！</view>
				<view class="addButton_order" @click="addOrderClick('add', '')">
					添加新订单
				</view>
				<view class="goOutLogin" @click="goOutLogin()">
					退出登录
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getOrderList,
		delOrders
	} from "@/api/user.js"
	export default {
		data() {
			return {
				page: 1,
				pagesize: 5,
				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				cardListArray: [],
				nodataFlag: false
			};
		},
		filters: {
			createtime(value) {
				//时间戳转换
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D;
			},
			isappointmentsuccessful(val) {
				if (val == 0) {
					return '预约中'
				} else if (val == 1) {
					return '预约成功'
				}
			},
			ispay(val) {
				if (val == 0) {
					return '未支付'
				} else if (val == 1) {
					return '已支付'
				}
			}
		},
		onLoad() {
			this.getOrderList()
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.page += 1
				this.getOrderList()
			}
		},
		methods: {
			getOrderList(val) {
				let that = this;
				let data = {};
				if (val == 'delOrder') {
					data = {
						page: 1,
						limit: 10,
					}
				} else {
					data = {
						page: that.page,
						limit: that.pagesize,
					}
				}
				getOrderList(data).then(res => {
					if (res.code == "success" && res.data) {
						if (res.data) {
							this.cardListArray = this.cardListArray.concat(res.data)
							if (res.data.length < this.pagesize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.isLoadMore = true
								this.loadStatus = 'nomore'
							} else {
								this.isLoadMore = false
							}
						} else {
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						}
						that.nodataFlag = true;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			delOrderClick(item) {
				let that = this;
				let data = {
					// __token__: '2f8672f4e545c3212489e0cbad6447df'
					order_id: item.id,
				}
				delOrders(data).then(res => {
					if (res.code == "success") {
						that.cardListArray = [];
						that.getOrderList('delOrder');
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			goOutLogin() {
				uni.removeStorageSync('__token__');
				//不存在则跳转至登录页
				uni.reLaunch({
					url: "/pages/index/index",
					success: () => {
						plus.navigator.closeSplashscreen();
					}
				})
			},
			addOrderClick(val, item) {
				let idss = JSON.stringify(val);
				uni.setStorageSync('orderList', JSON.stringify(item))
				uni.navigateTo({
					url: '/pages/order/order?idss=' + idss
				});
			},
			detailsClick(item) {
				uni.navigateTo({
					url: '/pages/order/orderDetails?order_id=' + item.id
				});
			}
		}
	}
</script>

<style lang="less">
	.bg-nodata {
		.image {
			display: flex;
			justify-content: center;
			margin: 155rpx 184rpx 31rpx 184rpx;
		}

		.no_text {
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #4D4D4D;
		}

		.addButton_order {
			width: 90%;
			margin: 99rpx auto 0 auto;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			background: linear-gradient(90deg, #00D2FF, #3A7BD5);
			border-radius: 12rpx;
			font-size: 32rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #FFFFFF;
		}

		.goOutLogin {
			font-size: 32rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #999999;
			text-align: center;
			margin: 50rpx auto;
			width: 90%;
			height: 88rpx;
			line-height: 88rpx;
			background: #EEEEEE;
			border-radius: 12rpx;
		}

	}

	.bgColor_order {
		background-color: #EEEEEE;
		min-height: 100vh;
		padding: 20rpx 32rpx;

		.goOutLogin {
			width: 90%;
			margin: 50rpx auto 0 auto;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			background: linear-gradient(90deg, #00D2FF, #3A7BD5);
			border-radius: 12rpx;
			font-size: 32rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #FFFFFF;
		}

		.addButton_order {
			width: 90%;
			margin: 99rpx auto 0 auto;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			background: linear-gradient(90deg, #00D2FF, #3A7BD5);
			border-radius: 12rpx;
			font-size: 32rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #FFFFFF;
		}

		.cardList {
			// height: 234rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding-bottom: 20rpx;
			margin-bottom: 21rpx;

			.ispay {
				height: 56rpx;
				// margin-bottom: 20rpx;
				color: #A1A1A1;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.list_concent {
				margin-left: 19rpx;
				margin-top: 25rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;

				.jfcgColor {
					color: #18FF64;
					// margin-bottom: 20rpx;
				}

				.list_concent_item {
					height: 56rpx;
					// margin-bottom: 20rpx;
					color: #A1A1A1;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.delbutton {
						width: 164rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						background: linear-gradient(90deg, #FF0060, #D53A3A);
						border-radius: 28rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}

					.xgbutton {
						margin-right: 20rpx;
						width: 164rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						background: linear-gradient(90deg, #00D2FF, #3A7BD5);
						border-radius: 28rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.ddjfColor {
					// margin-bottom: 20rpx;
					color: #FF1818;
				}
			}

			.list_name_hader {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 79rpx;
				border-bottom: 1rpx solid #EEEEEE;

				.title {
					margin-left: 16rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #4D4D4D;
				}

				.details {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #1890FF;
					margin-right: 19rpx;
				}
			}
		}
	}
</style>
